<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue2.5.15.js"></script>

</head>
<body>
<div id="app">
    <ul>
        书名：<input type="text" v-model="book.name">
        <input type="button" value="添加" @click="add">
        <li v-for="(item,index) in books"
            :key="index">
            序号：{{index+1}}&nbsp;&nbsp;书名：{{item.name}}----
            <input type="button" value="删除" @click="del(index)">
            <input type="button" value="修改" @click="update(index)">
        </li>
    </ul>
<!--    <div>
        <span v-for="(item,index) in user"
            :key="index">
            {{item}}
        </span>
    </div>
    <div>
        <span v-for="(value,key,index) in user"
              :key="index">
            {{key}}::&nbsp;{{value}}
        </span>
    </div>
    <div>
        <span v-for="number in 15"
              :key="index">
            {{number}}
        </span>
    </div>-->
</div>
</body>
<script>
    const vm = new Vue(
        {
            el:"#app",
            data:{
                books:[
                    {name:"Vue.js实战"},
                    {name:"SpringBoot实战"},
                    {name:"SpringCloud实战"},
                ],
                book:{

                },
                user:{
                    name:"zxd",
                    gender:"男",
                    age:"25",
                }
            },
            methods:{
                del(index){
                    console.log("删除元素：："+this.books[index])
                    this.books.splice(index,1)
                },
                update(index){
                    if(!this.book.name||!this.book.name.trim()){
                        return
                    }
                    console.log("修改元素：："+this.books[index])
                    // Vue.set(this.books,index,this.book)
                    this.books.splice(index,1,this.book)
                    this.book={}
                },
                add(){
                    if(!this.book.name||!this.book.name.trim()){
                        return
                    }
                    this.books.push(this.book)

                    this.book={}
                }

            }
        }
    )
</script>
</html>